React Suspenseããã¹ã¿ãŒããèªã¿èŸŒã¿ã®å€±æãšãšã©ãŒå埩ã¡ã«ããºã ã广çã«ç®¡çããããšã§ãèé害æ§ã®ãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããŸããã°ããŒãã«ãªãã¹ããã©ã¯ãã£ã¹ãåŠã³ãŸãããã
React Suspense ãšã©ãŒå埩ãã€ãã©ã€ã³ïŒèªã¿èŸŒã¿å€±æã®ç®¡ç
ããã³ããšã³ãéçºã®çµ¶ãéãªãé²åã®äžã§ãã·ãŒã ã¬ã¹ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãšã¯ã¹ããªãšã³ã¹ãäœãåºãããšãæãéèŠã§ããéåææäœã管çããããã®åŒ·åãªã¡ã«ããºã ã§ããReact Suspenseã¯ãããŒãã£ã³ã°ç¶æ ãšããŒã¿ãã§ããã®åŠçæ¹æ³ã«é©åœããããããŸããããã ããæ ã¯ãèªã¿èŸŒã¿äž...ãã€ã³ãžã±ãŒã¿ãŒã衚瀺ããã ãã§ã¯çµãããŸãããå ç¢ãªã¢ããªã±ãŒã·ã§ã³ã¯ãé害ãé©åã«åŠçããå Žæãã€ã³ã¿ãŒãããæ¥ç¶ã«é¢ä¿ãªããããžãã£ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã®ãæç¢ºã«å®çŸ©ããããšã©ãŒå埩ãã€ãã©ã€ã³ãå¿ èŠãšããŸãã
ã³ã¢ã³ã³ã»ããã®çè§£ïŒReact Suspenseãšãšã©ãŒå¢ç
React SuspenseïŒéåæUIã®åºç€
React Suspenseã䜿çšãããšãéåææäœïŒAPIããã®ããŒã¿ã®ãã§ãããªã©ïŒãåŸ æ©äžã«ãããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã®è¡šç€ºã宣èšçã«ç®¡çã§ããŸããããã«ãããåã³ã³ããŒãã³ãå ã§ããŒãã£ã³ã°ç¶æ ãæåã§ç®¡çãããããããããšã¬ã¬ã³ãã§åçåãããã¢ãããŒããå¯èœã«ãªããŸããåºæ¬çã«ãSuspenseã䜿çšãããšãReactã«ãããããã®ã³ã³ããŒãã³ãã¯ããã€ãã®ããŒã¿ãå¿ èŠãšããŠããŸããããŒãäžã¯ããã®ãã©ãŒã«ããã¯ãã¬ã³ããªã³ã°ããŠãã ããããšäŒããããšãã§ããŸãã
äŸïŒåºæ¬çãªSuspenseã®å®è£
import React, { Suspense, lazy } from 'react';
const UserProfile = lazy(() => import('./UserProfile'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<UserProfile userId={123} />
</Suspense>
</div>
);
}
export default App;
ãã®äŸã§ã¯ãUserProfileã¯ããŒã¿ããã§ããããå¯èœæ§ã®ããã³ã³ããŒãã³ãã§ããããŒã¿ã®ããŒãäžã<div>Loading...</div>ãã©ãŒã«ããã¯ã衚瀺ãããŸãã
React Error BoundariesïŒããªãã®å®å šããã
ãšã©ãŒå¢çã¯ãåã³ã³ããŒãã³ãããªãŒå ã®JavaScriptãšã©ãŒããã£ãããããããã®ãšã©ãŒããã°ã«èšé²ããã¢ããªã±ãŒã·ã§ã³å šäœãã¯ã©ãã·ã¥ããã代ããã«ãã©ãŒã«ããã¯UIã衚瀺ããReactã³ã³ããŒãã³ãã§ããããã¯ãåäžã®ãšã©ãŒãã¢ããªã±ãŒã·ã§ã³å šäœã忢ãããã®ãé²ããããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«éèŠã§ãããšã©ãŒå¢çã¯ãã¬ã³ããªã³ã°äžãã©ã€ããµã€ã¯ã«ã¡ãœãããããã³ãããã®äžã®ããªãŒå šäœã®ã³ã³ã¹ãã©ã¯ã¿ãŒã§ã®ã¿ãšã©ãŒããã£ããããŸãã
ãšã©ãŒå¢çã®äž»ãªæ©èœïŒ
- ãšã©ãŒã®ãã£ããïŒåã³ã³ããŒãã³ãã«ãã£ãŠã¹ããŒããããšã©ãŒããã©ããããŸãã
- ã¯ã©ãã·ã¥ã®é²æ¢ïŒæªåŠçã®ãšã©ãŒã«ããã¢ããªã±ãŒã·ã§ã³ã®ç Žæãé²ããŸãã
- ãã©ãŒã«ããã¯UIã®æäŸïŒãšã©ãŒã«ã€ããŠãŠãŒã¶ãŒã«éç¥ãããã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ããŸãã
- ãšã©ãŒãã®ã³ã°ïŒãããã°ã®ããã«ãšã©ãŒããªãã·ã§ã³ã§ãã°ã«èšé²ããŸãã
äŸïŒãšã©ãŒå¢çã®å®è£
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.error('Caught error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <div>Something went wrong. Please try again later.</div>;
}
return this.props.children;
}
}
export default ErrorBoundary;
ãšã©ãŒãã¹ããŒããå¯èœæ§ã®ããã³ã³ããŒãã³ããErrorBoundaryã³ã³ããŒãã³ãã§ã©ããããŠããããããã£ããããŠåŠçããŸãã
ãšã©ãŒå埩ãã€ãã©ã€ã³ã®æ§ç¯ïŒã¹ããããã€ã¹ãããã¬ã€ã
å ç¢ãªãšã©ãŒå埩ãã€ãã©ã€ã³ã®äœæã«ã¯ãéå±€åãããã¢ãããŒããå¿ èŠã§ããäž»èŠãªæé ã®å èš³ã¯æ¬¡ã®ãšããã§ãã
1. ã³ã³ããŒãã³ãå ã®ããŒã¿ãã§ããæŠç¥ãšãšã©ãŒåŠç
æåã®é²è¡ç·ã¯ãããŒã¿ããã§ããããã³ã³ããŒãã³ãå ã§ãšã©ãŒãçŽæ¥åŠçããããšã§ããããã«ã¯ä»¥äžãå«ãŸããŸãã
- Try-Catchãããã¯ïŒããŒã¿ãã§ããããžãã¯ã
try-catchãããã¯ã§ã©ããããŠããããã¯ãŒã¯ãšã©ãŒããµãŒããŒãšã©ãŒããŸãã¯äºæããªãäŸå€ããã£ããããŸãã - ã¹ããŒã¿ã¹ã³ãŒãïŒAPIããè¿ãããHTTPã¹ããŒã¿ã¹ã³ãŒãã確èªããŸããç¹å®ã®ã¹ããŒã¿ã¹ã³ãŒãïŒäŸïŒ404ã500ïŒãé©åã«åŠçããŸããããšãã°ã404ã¯ãªãœãŒã¹ãèŠã€ãããªãããšã瀺ãã500ã¯ãµãŒããŒåŽã®åé¡ã瀺åããŠããå¯èœæ§ããããŸãã
- ãšã©ãŒã¹ããŒãïŒã³ã³ããŒãã³ãå ã§ãšã©ãŒã¹ããŒããç¶æããŠããšã©ãŒã远跡ããŸãããŠãŒã¶ãŒã«ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããå詊è¡ããããã¢ããªã±ãŒã·ã§ã³ã®å¥ã®ã»ã¯ã·ã§ã³ã«ç§»åãããªãã·ã§ã³ãæäŸããŸãã
- ããã¯ãªãä»ãã®å詊è¡ïŒææ°ããã¯ãªãã§å詊è¡ããžãã¯ãå®è£ ããŸããããã¯ãæç¶çãªãããã¯ãŒã¯ã®åé¡ã«ç¹ã«åœ¹ç«ã¡ãŸããããã¯ãªãæŠç¥ã¯ãå詊è¡éã®æéãåŸã ã«å¢ãããèŠåŽããŠãããµãŒããŒãå§åããããšãé²ããŸãã
- ã¿ã€ã ã¢ãŠãã¡ã«ããºã ïŒãªã¯ãšã¹ãããã€ãŸã§ããã³ã°ã¢ããããªãããã«ãã¿ã€ã ã¢ãŠãã¡ã«ããºã ãå®è£ ããŸããããã¯ãã€ã³ã¿ãŒãããæ¥ç¶ãäžå®å®ãªã¢ãã€ã«ããã€ã¹ãããµãã©ä»¥åã®ã¢ããªã«ã®äžéšã®åœãªã©ããããã¯ãŒã¯æ¥ç¶ãä¿¡é Œã§ããªãåœã§ã¯ç¹ã«éèŠã§ãã
äŸïŒã³ã³ããŒãã³ãå ã®ãšã©ãŒåŠçïŒasync/awaitã䜿çšïŒ
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setUser(data);
setError(null);
} catch (err) {
setError(err.message);
setUser(null);
} finally {
setLoading(false);
}
};
fetchData();
}, [userId]);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error} <button onClick={() => window.location.reload()}>Retry</button></p>;
if (!user) return <p>User not found.</p>
return (
<div>
<h2>{user.name}</h2>
<p>Email: {user.email}</p>
</div>
);
}
export default UserProfile;
2. ããŒãã£ã³ã°ç¶æ ã®ããã®React Suspenseã®æŽ»çš
玹ä»ã§ç€ºããããã«ãReact Suspenseã¯ããŒãã£ã³ã°ç¶æ
ããšã¬ã¬ã³ãã«åŠçããŸããããŒã¿ããã§ããäžã«ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã衚瀺ããã«ã¯ãfallbackãããããæã€Suspenseã䜿çšããŸãããã©ãŒã«ããã¯ã¯ãã¹ãããŒãã¹ã±ã«ãã³UIãªã©ããŠãŒã¶ãŒã®æäœã劚ããªãèŠèŠçã«é©åãªèŠçŽ ã§ããå¿
èŠããããŸãã
3. ã°ããŒãã«ãšã©ãŒåŠçã®ããã®React Error Boundariesã®å®è£
ã¢ããªã±ãŒã·ã§ã³ã®ã»ã¯ã·ã§ã³ããšã©ãŒå¢çã§ã©ããããŠãåã ã®ã³ã³ããŒãã³ãå ã§åŠçãããªããšã©ãŒããã£ããããŸããã«ãŒãããã£ãŒãã£ãŒã¢ãžã¥ãŒã«ãªã©ãã¢ããªã±ãŒã·ã§ã³ã®äž»èŠãªã»ã¯ã·ã§ã³ãã©ããããããšãæ€èšããŠãã ããã
é 眮æŠç¥ïŒ
- ãããã¬ãã«ã®ãšã©ãŒå¢çïŒã¢ããªã±ãŒã·ã§ã³å šäœããããã¬ãã«ã®ãšã©ãŒå¢çã§ã©ããããŠãæé«ã¬ãã«ã§æªåŠçã®ãšã©ãŒããã£ããããŸããããã«ããã壿» çãªé害ã«å¯Ÿãã究極ã®ãã©ãŒã«ããã¯ãæäŸãããŸãã
- ãã£ãŒãã£ãŒåºæã®ãšã©ãŒå¢çïŒåã ã®ãã£ãŒãã£ãŒãŸãã¯ã¢ãžã¥ãŒã«ããšã©ãŒå¢çã§ã©ããããŸããããã¯ããšã©ãŒãåé¢ããã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåã«åœ±é¿ãäžããã®ãé²ãã®ã«åœ¹ç«ã¡ãŸãã
- ã«ãŒãåºæã®ãšã©ãŒå¢çïŒã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ã®å Žåãã«ãŒãã³ã³ããŒãã³ãå ã§ãšã©ãŒå¢çã䜿çšããŠãç¹å®ã®ã«ãŒãã®ã¬ã³ããªã³ã°äžã«çºçãããšã©ãŒãåŠçããŸãã
å€éšãµãŒãã¹ãžã®ãšã©ãŒã¬ããŒã
componentDidCatchã¡ãœããå
ã§ãšã©ãŒã¬ããŒããµãŒãã¹ïŒäŸïŒSentryãBugsnagãRollbarïŒãçµ±åããŸããããã«ãããæ¬¡ã®ããšãå¯èœã«ãªããŸãã
- ãšã©ãŒã®ç£èŠïŒã¢ããªã±ãŒã·ã§ã³ã§çºçãããšã©ãŒã®é »åºŠãšçš®é¡ã远跡ããŸãã
- æ ¹æ¬åå ã®ç¹å®ïŒãšã©ãŒã®è©³çްãã¹ã¿ãã¯ãã¬ãŒã¹ãããã³ãŠãŒã¶ãŒã³ã³ããã¹ããåæããŠããšã©ãŒã®æ ¹æ¬åå ãçè§£ããŸãã
- ä¿®æ£ã®åªå é äœä»ãïŒãŠãŒã¶ãŒãžã®åœ±é¿ã«åºã¥ããŠããšã©ãŒä¿®æ£ã®åªå é äœãä»ããŸãã
- ã¢ã©ãŒãã®ååŸïŒæ°ãããšã©ãŒãçºçããå ŽåããŸãã¯ãšã©ãŒãæ¥å¢ããå Žåã«ã¢ã©ãŒããåä¿¡ããè¿ éã«å¯Ÿå¿ã§ããããã«ããŸãã
4. å ç¢ãªãšã©ãŒã¡ãã»ãŒãžæŠç¥ã®æ§ç¯
ãšã©ãŒã¡ãã»ãŒãžã®æç¢ºããšã³ã³ããã¹ãïŒ
- å ·äœçã«ããïŒäœãããŸããããªãã£ãã®ãããŠãŒã¶ãŒã«äŒãããç°¡æœã§èª¬æçãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãããäœããããŸããããŸããã§ãããã®ãããªäžè¬çãªã¡ãã»ãŒãžã¯é¿ããŠãã ããã
- ã³ã³ããã¹ããæäŸããïŒãŠãŒã¶ãŒãå®è¡ããããšããŠããã¢ã¯ã·ã§ã³ãã衚瀺ãããŠããããŒã¿ãªã©ããšã©ãŒã¡ãã»ãŒãžã«é¢é£ããã³ã³ããã¹ããå«ããŸãã
- ãŠãŒã¶ãŒãã¬ã³ããªãŒãªèšèªïŒãŠãŒã¶ãŒãçè§£ããããèšèªã䜿çšããŸããäžèŠãªå Žåã¯ãå°éçšèªãé¿ããŠãã ããã
- åœéåïŒi18nïŒïŒè€æ°ã®èšèªãšæåããµããŒãããããã«ããšã©ãŒã¡ãã»ãŒãžã«i18nãå®è£
ããŸãããšã©ãŒã¡ãã»ãŒãžã翻蚳ããã«ã¯ã
i18nextãreact-intlã®ãããªã©ã€ãã©ãªã䜿çšããŸãã
ãšã©ãŒåŠçã®ãã¹ããã©ã¯ãã£ã¹
- ã¬ã€ãã³ã¹ïŒåé¡ã解決ããããã®æç¢ºãªæç€ºãæäŸããŸããããã«ã¯ãå詊è¡ããããã®ãã¿ã³ãã«ã¹ã¿ããŒãµããŒããžã®é£çµ¡ã«é¢ããæ å ±ããŸãã¯ã€ã³ã¿ãŒãããæ¥ç¶ã確èªããæ¹æ³ã«é¢ãããã³ããå«ãŸããå ŽåããããŸãã
- ããžã¥ã¢ã«ã®æ€èšïŒã¢ã€ã³ã³ãŸãã¯ç»åã䜿çšããŠããšã©ãŒã¿ã€ããèŠèŠçã«è¡šããŸããããšãã°ãæ å ±ãšã©ãŒã«ã¯èŠåã¢ã€ã³ã³ã䜿çšããé倧ãªãšã©ãŒã«ã¯ãšã©ãŒã¢ã€ã³ã³ã䜿çšããŸãã
- ã³ã³ããã¹ãæ å ±ïŒã¢ããªã±ãŒã·ã§ã³å ã®ãŠãŒã¶ãŒã®çŸåšã®å Žæãªã©ãé¢é£æ å ±ã衚瀺ãããŠãŒã¶ãŒãåã®ãã¥ãŒãŸãã¯ã¢ããªã±ãŒã·ã§ã³ã®å®å šãªéšåã«æ»ãæ¹æ³ãæäŸããŸãã
- ããŒãœãã©ã€ãºïŒãŠãŒã¶ãŒã®ãããã¡ã€ã«ãŸãã¯ãšã©ãŒã®é倧床ã«åºã¥ããŠããšã©ãŒã¡ãã»ãŒãžã調æŽããããšãæ€èšããŠãã ããã
äŸ
- ãããã¯ãŒã¯ãšã©ãŒïŒããµãŒããŒã«æ¥ç¶ã§ããŸãããã€ã³ã¿ãŒãããæ¥ç¶ã確èªããŠãããäžåºŠã詊ããã ãããã
- ããŒã¿ãèŠã€ãããŸããïŒãèŠæ±ããããªãœãŒã¹ãèŠã€ãããŸããã§ãããURLã確èªãããããµããŒãã«ãåãåãããã ãããã
- èªèšŒãšã©ãŒïŒãç¡å¹ãªãŠãŒã¶ãŒåãŸãã¯ãã¹ã¯ãŒãã§ããããäžåºŠã詊ãããã ããããã¹ã¯ãŒãããªã»ããããŠãã ãããã
5. ãŠãŒã¶ãŒãã¬ã³ããªãŒãªå詊è¡ã¡ã«ããºã ã®å®è£
å詊è¡ã¡ã«ããºã ã¯ããšã©ãŒããå埩ããã¯ãŒã¯ãããŒãç¶è¡ããæ©èœãæäŸããŸããæ¬¡ã®ãªãã·ã§ã³ãå«ããŸãã
- å詊è¡ãã¿ã³ïŒãšã©ãŒã¡ãã»ãŒãžå ã«æç¢ºãªãå詊è¡ããã¿ã³ãæäŸããŸããã¯ãªãã¯ãããšãããŒã¿ãã§ããããã»ã¹ãŸãã¯å€±æããã¢ã¯ã·ã§ã³ãåããªã¬ãŒãããŸãã
- èªåå詊è¡ïŒäžæçãªãšã©ãŒïŒäŸïŒäžæçãªãããã¯ãŒã¯ã®åé¡ïŒã®å Žåãææ°ããã¯ãªãã§èªåå詊è¡ãå®è£ ããããšãæ€èšããŠãã ãããã¿ã€ã ã¢ãŠããšå詊è¡é å»¶ãå®è£ ããŠããµãŒããŒãç¹°ãè¿ããªã¯ãšã¹ãã§å§åããªãããã«ããŸãã
- ãªãã©ã€ã³ã¢ãŒãïŒã¢ããªã±ãŒã·ã§ã³ã«é©ããŠããå Žåã¯ãã¢ã¯ãã£ããªã€ã³ã¿ãŒãããæ¥ç¶ããªããŠããŠãŒã¶ãŒãäœæ¥ãç¶è¡ã§ããããã«ããªãã©ã€ã³æ©èœãŸãã¯ãã£ãã·ã³ã°ã¡ã«ããºã ã®å®è£ ãæ€èšããŠãã ãããããŒã«ã«ã¹ãã¬ãŒãžããµãŒãã¹ã¯ãŒã«ãŒãªã©ã®ããŒã«ã䜿çšããŠããªãã©ã€ã³ã¢ãŒãã®ãµããŒããæ€èšããŠãã ããã
- æŽæ°ïŒå Žåã«ãã£ãŠã¯ãããŒãžãæŽæ°ããããšãåé¡ã解決ããããã®æãç°¡åãªæ¹æ³ã§ããå詊è¡ã¢ã¯ã·ã§ã³ãé¢é£ããã³ã³ããŒãã³ãããŸãã¯æ·±å»ãªå Žåã¯ããŒãžå šäœãæŽæ°ããããšã確èªããŠãã ããã
6. ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
ãšã©ãŒå埩ãã€ãã©ã€ã³ããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ããã
- ã»ãã³ãã£ãã¯HTMLïŒã»ãã³ãã£ãã¯HTMLèŠçŽ ã䜿çšããŠããšã©ãŒã¡ãã»ãŒãžãšãã©ãŒã«ããã¯UIãæ§é åããŸãã
- ARIA屿§ïŒARIA屿§ã䜿çšããŠãã¹ã¯ãªãŒã³ãªãŒããŒã«è¿œå ã®ã³ã³ããã¹ããšæ å ±ãæäŸããŸããããã¯ãèŠèŠé害ã®ãããŠãŒã¶ãŒã«ãšã£ãŠéåžžã«éèŠã§ãã
- è²ã®ã³ã³ãã©ã¹ãïŒããã¹ãèŠçŽ ãšèæ¯èŠçŽ ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ããããããšã確èªããŠãèŠèŠé害ã®ãããŠãŒã¶ãŒã®èªã¿ããããåäžãããŸãã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒå詊è¡ãã¿ã³ããã®ä»ã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ããããŒããŒãã䜿çšããŠç°¡åã«ããã²ãŒãã§ããããšã確èªããŸãã
- ã¹ã¯ãªãŒã³ãªãŒããŒã®äºææ§ïŒãšã©ãŒã¡ãã»ãŒãžãšãã©ãŒã«ããã¯UIãã¹ã¯ãªãŒã³ãªãŒããŒã§ãã¹ãããŠãããããé©åã«ã¢ããŠã³ã¹ãããããšã確èªããŸãã
ã°ããŒãã«ãªèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
1. ããã©ãŒãã³ã¹ã®æé©åïŒã¹ããŒãã¯ã©ãã§ãéèŠ
å Žæãããã€ã¹ã«é¢ä¿ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«ã¹ã ãŒãºãªãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããŸãã
- ã³ãŒãåå²ïŒã³ãŒãåå²ã䜿çšããŠãç¹å®ã®ã«ãŒããŸãã¯ãã£ãŒãã£ãŒã«å¿ èŠãªã³ãŒãã®ã¿ãããŒãããŸãã
- ç»åã®æé©åïŒç»åã®ãµã€ãºãšåœ¢åŒãæé©åããŸããã¬ã¹ãã³ã·ãç»åã䜿çšããŠããŠãŒã¶ãŒã®ããã€ã¹ã«åºã¥ããŠç°ãªãç»åãµã€ãºãæäŸããŸããé å»¶ããŒããæŽ»çšããŸãã
- ãã£ãã·ã³ã°ïŒãã£ãã·ã³ã°ã¡ã«ããºã ãå®è£ ããŠããµãŒããŒãžã®ãªã¯ãšã¹ãæ°ãæžãããŸãã
- CDNïŒã³ã³ãã³ãé ä¿¡ãããã¯ãŒã¯ïŒCDNïŒã䜿çšããŠããŠãŒã¶ãŒã®å Žæã«æãè¿ããµãŒããŒããã¢ã»ãããé ä¿¡ããŸãã
- äŸåé¢ä¿ã®æå°åïŒå€éšã©ã€ãã©ãªãæå°éã«æããã³ãŒããæé©åããããšã§ãJavaScriptãã³ãã«ã®ãµã€ãºãå°ããããŸãã
2. åœéåãšããŒã«ãªãŒãŒã·ã§ã³ïŒã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãžã®é©å¿
è€æ°ã®èšèªãšæåããµããŒãããããã«ã¢ããªã±ãŒã·ã§ã³ãèšèšããŸããæ¬¡ã®ç®çã§i18nã©ã€ãã©ãªïŒ`react-intl`ã`i18next`ãªã©ïŒã掻çšããŸãã
- 翻蚳ïŒãšã©ãŒã¡ãã»ãŒãžãå«ãããã¹ãŠã®ããã¹ãæååãè€æ°ã®èšèªã«ç¿»èš³ããŸãã
- æ¥ä»ãšæå»ã®æžåŒèšå®ïŒãŠãŒã¶ãŒã®ãã±ãŒã«ã«åŸã£ãŠæ¥ä»ãšæå»ãæžåŒèšå®ããŸãã
- æ°å€ã®æžåŒèšå®ïŒãŠãŒã¶ãŒã®ãã±ãŒã«ã«åŸã£ãŠæ°å€ãšéè²šãæžåŒèšå®ããŸãã
- å³ããå·ŠïŒRTLïŒã®ãµããŒãïŒUIãã¢ã©ãã¢èªãããã©ã€èªã®ãããªå³ããå·Šã®èšèªãšäºææ§ãããããšã確èªããŸãã
- é貚圢åŒïŒãŠãŒã¶ãŒã®å Žæã«åºã¥ããŠé貚圢åŒãåçã«èª¿æŽããŸãã
äŸïŒi18nã«`react-intl`ã䜿çš
import React from 'react';
import { FormattedMessage } from 'react-intl';
function ErrorMessage({ errorCode }) {
return (
<div>
<FormattedMessage
id="error.network"
defaultMessage="Network error. Please try again."
/>
</div>
);
}
export default ErrorMessage;
翻蚳ã管çããã«ã¯ãæ§æãã¡ã€ã«ãŸãã¯å€éšãµãŒãã¹ã䜿çšããŸããäŸïŒ
{
"en": {
"error.network": "Network error. Please try again."
},
"es": {
"error.network": "Error de red. Por favor, inténtelo de nuevo."
}
}
3. ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒUXïŒãšãã¶ã€ã³åå
ãã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠäžè²«æ§ããããçŽæçã§ã楜ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæããŸãã
- äžè²«ããUIïŒè¡šç€ºãããŠãããšã©ãŒã¡ãã»ãŒãžã«é¢ä¿ãªããã¢ããªã±ãŒã·ã§ã³ã®ãã¹ãŠã®éšåã§äžè²«ããUIãç¶æããŸãã
- æç¢ºã§ç°¡æœãªèšèªïŒãšã©ãŒã¡ãã»ãŒãžã§æç¢ºã§ç°¡æœãªèšèªã䜿çšããŸãã
- èŠèŠçãªæãããïŒã¢ã€ã³ã³ãè²ãªã©ã®èŠèŠçãªæãããã䜿çšããŠããšã©ãŒã®é倧床ãäŒããŸãã
- ãã£ãŒãããã¯ïŒã¢ã¯ã·ã§ã³ãé²è¡äžã®å Žåã«ãŠãŒã¶ãŒã«ãã£ãŒãããã¯ãæäŸããŸãã
- ããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ãŒïŒããŒãã¹ãããŒãããã°ã¬ã¹ããŒãªã©ã®ããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ãŒã䜿çšããŠãæäœã®ã¹ããŒã¿ã¹ã瀺ããŸãã
4. ã»ãã¥ãªãã£ã«é¢ããèæ ®äºé
ã»ãã¥ãªãã£ã®ãã¹ããã©ã¯ãã£ã¹ïŒ
- æ©å¯æ å ±ã®æŒãããé²ãïŒããŒã¿ããŒã¹ã®è³æ Œæ å ±ãå éšAPIãšã³ããã€ã³ãããŠãŒã¶ãŒã®è©³çްãã¹ã¿ãã¯ãã¬ãŒã¹ãªã©ãæ©å¯æ å ±ããŠãŒã¶ãŒã«å ¬éãããªãããã«ããšã©ãŒã¡ãã»ãŒãžãæ³šææ·±ã確èªããŠãã ãããããã«ãããæªæã®ããæ»æã®æ©äŒãçããå¯èœæ§ããããŸãããšã©ãŒã¡ãã»ãŒãžããæªçšãããå¯èœæ§ã®ããäžèŠãªæ å ±ãæŒããããŠããªãããšã確èªããŠãã ããã
- å ¥åã®æ€èšŒãšãµãã¿ã€ãºïŒã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°ïŒXSSïŒããã³SQLã€ã³ãžã§ã¯ã·ã§ã³æ»æããä¿è·ããããã«ããã¹ãŠã®ãŠãŒã¶ãŒå ¥åã«å¯ŸããŠåŸ¹åºçãªå ¥åæ€èšŒãšãµãã¿ã€ãºãå®è£ ããŸãã
- å®å šãªããŒã¿ã¹ãã¬ãŒãžïŒããŒã¿ãå®å šã«ä¿åãããæå·åãããŠããããšã確èªããŸãã
- HTTPSã®äœ¿çšïŒã¢ããªã±ãŒã·ã§ã³ãšãµãŒããŒéã®éä¿¡ãæå·åããããã«ãåžžã«HTTPSã䜿çšããŸãã
- 宿çãªã»ãã¥ãªãã£ç£æ»ïŒè匱æ§ãç¹å®ããŠä¿®æ£ããããã«ã宿çãªã»ãã¥ãªãã£ç£æ»ã宿œããŸãã
5. ãã¹ããšç£èŠïŒç¶ç¶çãªæ¹å
- ãŠããããã¹ãïŒãšã©ãŒåŠçã³ã³ããŒãã³ããšããŒã¿ãã§ããããžãã¯ã®æ©èœãæ€èšŒããããã®ãŠããããã¹ããäœæããŸãã
- çµ±åãã¹ãïŒã³ã³ããŒãã³ããšAPIéã®çžäºäœçšãæ€èšŒããããã®çµ±åãã¹ããäœæããŸãã
- ãšã³ãããŒãšã³ããã¹ãïŒãŠãŒã¶ãŒã®æäœãã·ãã¥ã¬ãŒãããå®å šãªãšã©ãŒå埩ãã€ãã©ã€ã³ããã¹ãããããã®ãšã³ãããŒãšã³ããã¹ããäœæããŸãã
- ãšã©ãŒç£èŠïŒãšã©ãŒã¬ããŒããµãŒãã¹ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®ãšã©ãŒãç¶ç¶çã«ç£èŠããŸãã
- ããã©ãŒãã³ã¹ç£èŠïŒã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç£èŠããããã«ããã¯ãç¹å®ããŸãã
- ãŠãŒã¶ããªãã£ãã¹ãïŒå®éã®ãšã©ãŒã¡ãã»ãŒãžãšå埩ã¡ã«ããºã ã®æ¹åé åãç¹å®ããããã«ãå®éã®ãŠãŒã¶ãŒãšã®ãŠãŒã¶ããªãã£ãã¹ãã宿œããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
1. SuspenseãšããŒã¿ãã£ãã·ã³ã°
ããã©ãŒãã³ã¹ãåäžããããµãŒããŒãžã®è² è·ã軜æžããããã«ãããŒã¿ãã£ãã·ã³ã°æŠç¥ãå®è£
ããŸããswrãreact-queryã®ãããªã©ã€ãã©ãªãSuspenseãšçµã¿åãããŠäœ¿çšââãããšã广çãªãã£ãã·ã³ã°ãå¯èœã«ãªããŸãã
2. ã«ã¹ã¿ã ãšã©ãŒã³ã³ããŒãã³ã
åå©çšå¯èœãªã«ã¹ã¿ã ãšã©ãŒã³ã³ããŒãã³ããäœæããŠãã¢ããªã±ãŒã·ã§ã³å šäœã§ãšã©ãŒã¡ãã»ãŒãžãæŽåæ§ããã£ãŠè¡šç€ºããŸãããããã®ã³ã³ããŒãã³ãã«ã¯ãå詊è¡ãã¿ã³ãé£çµ¡å æ å ±ãããã³åé¡è§£æ±ºã®ããã®ææ¡ãªã©ã®æ©èœãå«ããããšãã§ããŸãã
3. ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã
JavaScriptãç¡å¹ã«ãªã£ãŠããå Žåã§ãåäœããããã«ã¢ããªã±ãŒã·ã§ã³ãèšèšããŸãããµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒãŸãã¯éçãµã€ãçæïŒSSGïŒã䜿çšããŠãåºæ¬çãªæ©èœãšã¯ã¹ããªãšã³ã¹ãæäŸããJavaScriptãæå¹ã«ãªã£ãŠãããŠãŒã¶ãŒã«ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããæäŸããŸãã
4. ãµãŒãã¹ã¯ãŒã«ãŒãšãªãã©ã€ã³æ©èœ
ãµãŒãã¹ã¯ãŒã«ãŒãå©çšããŠã¢ã»ããããã£ãã·ã¥ãããªãã©ã€ã³æ©èœãæå¹ã«ããŸããããã«ãããã€ã³ã¿ãŒãããæ¥ç¶ãå¶éãããŠããããŸãã¯ãŸã£ãããªãå°åã§ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããŸãããµãŒãã¹ã¯ãŒã«ãŒã¯ãã€ã³ã¿ãŒãããã¢ã¯ã»ã¹ãå€åããåœã«ãšã£ãŠåªããã¢ãããŒãã«ãªãå¯èœæ§ããããŸãã
5. ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒ
è€éãªã¢ããªã±ãŒã·ã§ã³ã®å Žåã¯ãåæããŒãæéãšSEOãæ¹åããããã«ããµãŒããŒãµã€ãã¬ã³ããªã³ã°ãæ€èšããŠãã ãããSSRã䜿çšãããšãåæã¬ã³ããªã³ã°ã¯ãµãŒããŒåŽã§è¡ãããã¯ã©ã€ã¢ã³ããåŒãç¶ããŸãã
å®äžçã®äŸãšã°ããŒãã«ãªã±ãŒã¹ã¹ã¿ãã£
1. Eã³ããŒã¹ãã©ãããã©ãŒã ïŒã°ããŒãã«ïŒ
äžçäžã®é¡§å®¢ã«ãµãŒãã¹ãæäŸããEã³ããŒã¹ãã©ãããã©ãŒã ã¯ãããŸããŸãªãããã¯ãŒã¯ç¶æ³ãæ¯æãã²ãŒããŠã§ã€ã®åé¡ã補åã®å ¥æå¯èœæ§ã®å€åãªã©ã倿§ãªèª²é¡ã«çŽé¢ããŠããŸãã圌ãã®æŠç¥ã«ã¯ã次ã®ãã®ãå«ãŸããŸãã
- 補åãªã¹ãã£ã³ã°ãšã©ãŒïŒè£œåæ å ±ã®ååŸäžã«APIã倱æããå Žåããµã€ãã¯ãŠãŒã¶ãŒã®èšèªïŒi18nãæŽ»çšïŒã§ãã©ãŒã«ããã¯ã¡ãã»ãŒãžã䜿çšããå詊è¡ãŸãã¯ä»ã®è£œåã®é²èŠ§ãææ¡ããŸãããŠãŒã¶ãŒã®IPã¢ãã¬ã¹ã確èªããŠãéè²šãæ£ãã衚瀺ããŸãã
- æ¯æãã²ãŒããŠã§ã€ãšã©ãŒïŒãã§ãã¯ã¢ãŠãäžã«æ¯æãã倱æããå Žåãæç¢ºã§ããŒã«ã©ã€ãºããããšã©ãŒã¡ãã»ãŒãžã衚瀺ããããŠãŒã¶ãŒã¯å詊è¡ããããã«ã¹ã¿ããŒãµããŒãã«é£çµ¡ã§ããŸãã
- åšåº«ç®¡çïŒç¹å®ã®åœã§ã¯ãåšåº«ã®æŽæ°ãé ããå ŽåããããŸãããšã©ãŒå¢çã¯ãããæ€åºããã¡ãã»ãŒãžã衚瀺ããå¯çšæ§ã®ç¢ºèªãææ¡ããŸãã
2. ã°ããŒãã«ãã¥ãŒã¹ãŠã§ããµã€ã
ã°ããŒãã«ãã¥ãŒã¹ãŠã§ããµã€ãã¯ãäžçäžã®ãŠãŒã¶ãŒã«ã¿ã€ã ãªãŒãªæ å ±ãæäŸããããšãç®æããŠããŸããäž»èŠãªã³ã³ããŒãã³ãïŒ
- ã³ã³ãã³ãé ä¿¡ã®åé¡ïŒèšäºã®ããŒãã«å€±æããå Žåããµã€ãã¯ããŒã«ã©ã€ãºããããšã©ãŒã¡ãã»ãŒãžã衚瀺ããå詊è¡ãªãã·ã§ã³ãæäŸããŸãããµã€ãã«ã¯ããããã¯ãŒã¯æ¥ç¶ãé ããŠãŒã¶ãŒåãã®èªã¿èŸŒã¿ã€ã³ãžã±ãŒã¿ãŒããããŸãã
- APIã¬ãŒãå¶éïŒãŠãŒã¶ãŒãAPIå¶éãè¶ ããå Žåãäžå¯§ãªã¡ãã»ãŒãžã衚瀺ãããåŸã§æŽæ°ããããã«ä¿ãããŸãã
- åºåé ä¿¡ïŒãããã¯ãŒã¯å¶éã«ããåºåã®ããŒãã«å€±æããå Žåãã¬ã€ã¢ãŠãã確ä¿ããããã«ãã¬ãŒã¹ãã«ããŒã䜿çšãããŸãã
3. ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãæã€ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ã¯ãSuspenseãšError Boundariesã䜿çšããŠãããŸããŸãªé害ã·ããªãªãåŠçã§ããŸãã
- ãããã¯ãŒã¯æ¥ç¶ïŒæçš¿äžã«ãŠãŒã¶ãŒã®æ¥ç¶ãåæãããå Žåããšã©ãŒã¯ã¡ãã»ãŒãžã衚瀺ããæçš¿ãäžæžããšããŠä¿åããŸãã
- ãŠãŒã¶ãŒãããã¡ã€ã«ããŒã¿ïŒãŠãŒã¶ãŒã®ãããã¡ã€ã«ãããŒããããšãã«ãããŒã¿ååŸã«å€±æããå Žåãã·ã¹ãã ã¯äžè¬çãªãšã©ãŒã衚瀺ããŸãã
- ãããªã¢ããããŒãã®åé¡ïŒãããªã®ã¢ããããŒãã«å€±æããå Žåãã·ã¹ãã ã¯ã¡ãã»ãŒãžã衚瀺ãããã¡ã€ã«ã確èªããŠå詊è¡ããããã«ãŠãŒã¶ãŒã«ä¿ããŸãã
çµè«ïŒReact Suspenseã䜿çšãããå埩åããããŠãŒã¶ãŒãã¬ã³ããªãŒãªã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯
React Suspenseãšã©ãŒå埩ãã€ãã©ã€ã³ã¯ãç¹ã«ãããã¯ãŒã¯ç¶æ³ãšãŠãŒã¶ãŒã®æåŸ ã倧ããç°ãªãã°ããŒãã«ã³ã³ããã¹ãã«ãããŠãä¿¡é Œæ§ãé«ããŠãŒã¶ãŒãã¬ã³ããªãŒãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«éåžžã«éèŠã§ãããã®ã¬ã€ãã§æŠèª¬ãããŠãããã¯ããã¯ãšãã¹ããã©ã¯ãã£ã¹ãå®è£ ããããšã§ãé害ãé©åã«åŠçããæç¢ºã§æçãªãšã©ãŒã¡ãã»ãŒãžãæäŸãããŠãŒã¶ãŒãã©ãã«ããŠãããžãã£ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãããã®ã¢ãããŒãã¯ããšã©ãŒã®åŠçã ãã§ã¯ãããŸãããããã¯ä¿¡é Œãæ§ç¯ããã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ãšã®è¯å¥œãªé¢ä¿ãä¿é²ããããšã§ããã¢ããªã±ãŒã·ã§ã³ãå ç¢ã§ãŠãŒã¶ãŒäžå¿ã§ããç¶ãããã¹ãŠã®äººã«å¯èœãªéãæé«ã®ãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããããã«ããšã©ãŒå埩æŠç¥ãç¶ç¶çã«ç£èŠããã¹ããããã³æ¹åããŸãã